<script setup lang="ts">
import {defineProps} from 'vue';
import {type IToDo} from '@/types'
import useDelToDo from '@/hooks/useDelToDo'

defineProps<{ toDo: IToDo, toDoList: any }>()
const {delToDo} = useDelToDo()


</script>

<template>
  <el-card style="height: 100%; display: flex; flex-direction: column" body-style="flex: 1">
    <template #header>
      <div class="card-header">
          <span>
            <el-text size="large">{{ toDo.title }}</el-text>
          </span>
      </div>
    </template>
    <p class="text item">
      {{ toDo.content }}
    </p>
    <template #footer>
      <el-popconfirm title="您确定要修改么" confirm-button-text="确定" cancel-button-text="取消">
        <template #reference>
          <el-button>
            修改
          </el-button>
        </template>
      </el-popconfirm>
      <el-popconfirm title="您确定要删除么" confirm-button-text="确定" cancel-button-text="取消"
                     @confirm="delToDo(toDo.id)">
        <template #reference>
          <el-button>
            删除
          </el-button>
        </template>
      </el-popconfirm>
    </template>
  </el-card>
</template>

<style scoped lang="scss">
</style>